<template>
  <nav>
    <ul>
      <li 
        v-for="item in navItems" 
        :key="item.path"
        @click="navigateTo(item.path)"
        :class="{ 'active': $route.path === item.path }"
      >
        {{ item.title }}
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      navItems: [
        { title: '首页', path: '/main' },
        { title: '考试管理', path: '/ksgl' },
        { title: '成绩管理', path: '/cjgl' },
        { title: '题库管理', path: '/tkgl' },
        { title: '个人中心', path: '/grzx' }
      ]
    }
  },
  methods: {
    navigateTo(path) {
      // 避免重复导航到当前路由
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style scoped>
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #ffffff;
  
}

nav ul li {
  padding: 14px 20px;
  color: #333;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}

nav ul li:hover {
  background-color: #f5f5f5;
  color: #07a2ec;
}

nav ul li.active {
  color: #07a2ec;
  border-bottom-color: #07a2ec;
  font-weight: bold;
}
</style>